<style>

</style>

<div>
    <input type="text" id="name"> 姓名 <br>
    <input type="text" id="tel"> 电话 <br>
    <input type="text" id="address"> 地址 <br>
    <button class="confirm-btn">增加用户</button>
</div>
<hr>
<table border="1">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>电话</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>


<script>
    ! function(window, document, $, undefined) {
        let TelBook = {
            init() {
                this.initEvent()
                this.renderTable()
            },
            initEvent() {
                $('.confirm-btn').on('click', {
                    obj: this
                }, this.confirmBtnClick)
                $('tbody').on('click', '.del-btn', {
                    obj: this
                }, this.onDelBtnClick)
                $('tbody').on('click', '.update-btn', {
                    obj: this
                }, this.onUpdateBtnClick)
            },
            onUpdateBtnClick(e) {
                let id = $(this).attr('uId');
                let arr = e.data.obj.get()

                let obj = arr.find(item => item.id == id)

                Object.keys(obj).forEach(key => {
                    if ($(`#${key}`).length > 0) {
                        $(`#${key}`).val(obj[key])
                    }
                })
                $('.confirm-btn').html('修改用户').attr('id', id)
            },
            onDelBtnClick(e) {
                let arr = e.data.obj.get()
                let id = $(this).attr('uId')
                let index = arr.findIndex(item => item.id == id)
                arr.splice(index, 1);
                e.data.obj.save(arr)
                e.data.obj.renderTable()
            },
            confirmBtnClick(e) {
                let arr = e.data.obj.get();
                let obj = {};
                $('input')
                    .each(function(index, item) {
                        obj[item.id] = $(item).val()
                    }).val('')
                if (this.id) {
                    obj.id = this.id;
                    arr = arr.map(item => {
                        if (item.id == this.id) {
                            item = obj;
                        }
                        return item;
                    })
                } else {
                    obj.id = Date.now()
                    arr.push(obj);
                }
                e.data.obj.save(arr)
                e.data.obj.renderTable()
                this.id = '';
            },

            renderTable() {
                let arr = this.get();
                let newArr = []
                $.each(arr, (index, item) => {
                    newArr.push(
                        `
                          <tr>
                          <td>${item.id}</td>
                          <td>${item.name}</td>
                          <td>${item.tel}</td>
                          <td>${item.address}</td>
                          <td>
                             <button uId="${item.id}" class="del-btn">删除</button>
                             <button  uId="${item.id}" class="update-btn">修改</button>
                          </td>
                          </tr>
                        `
                    )
                })
                $('tbody').html(newArr.join(''))

            },
            get() {
                return JSON.parse(localStorage.getItem('userList')) || []
            },
            save(arr) {
                localStorage.setItem('userList', JSON.stringify(arr))
            }
        }

        TelBook.init()
    }(window, document, jQuery)
</script>